<template>
  <div>
    <el-form>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="原始数据：">
            <el-input v-model="diffstr" type="textarea" :autosize="{minRows: 2, maxRows: 15}" placeholder="请输入旧数据"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="展示效果：">
            <el-switch v-model="fotmat" active-text="line-by-line" inactive-text="side-by-side"></el-switch>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="差异化范围：">
            <el-input-number v-model="context" placeholder=""></el-input-number>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <code-diff :diff-string="diffstr" :output-format="outputFormat" />

  </div>
</template>

<script>

import diffstr from '../data/diffstr.js'
import codediff from '../plugins/code-diff.js'
export default {
  name: 'CodeDiffNew',
  components: {
    codediff
  },
  data () {
    return {
      diffstr,
      fotmat: false
    }
  },
  computed: {
    outputFormat () {
      return this.fotmat ? 'line-by-line' : 'side-by-side'
    }
  }
}
</script>
